<template>
	<view>
		<nav-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">商家列表</block>
		</nav-custom>
		<view class="store-list">
			<view class="nav">
				<view class="item" v-for="(item, index) in storeNav" :index="index" @click="onStoreNav(item.id)">
					<image :src="item.img"></image>
					<view>{{item.name}}</view>
				</view>
			</view>
			<view class="list">
				<view class="onorder" v-if="storeList.length==0">
					<view class="iconfont icon-meiyouxiangguanshuju"></view>
				</view>
				<view class="item" v-for="(item, index) in storeList" :index="index" @click="onStoreList(item.id)">
					<view class="item-img">
						<image :src="item.logo"></image>
					</view>
					<view class="item-lable">
						<view class="name">{{item.name}}</view>
						<view class="address">
							<view class="iconfont icon-dizhi"></view>
							{{item.address}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loading :visible="loading"></u-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				//1婚礼策划、2婚纱摄影、3婚礼鲜花、4婚礼蛋糕、5婚礼化妆、6婚宴酒店、7婚礼司仪、8婚礼跟拍
				storeNav: [{
						id: 1,
						name: '婚礼策划',
						img: 'http://qnm.hunliji.com/o_1c91c7kkv15ajp997gal41itbf.png'
					},
					{
						id: 2,
						name: '婚纱摄影',
						img: 'http://qnm.hunliji.com/o_1c91c7kkv67gtog16t011541f99j.png'
					},
					{
						id: 3,
						name: '婚礼鲜花',
						img: 'http://qnm.hunliji.com/o_1aqtq6g3m2319dr1io11pb51apkc.png'
					},
					{
						id: 4,
						name: '婚礼蛋糕',
						img: 'http://qnm.hunliji.com/o_1c91c7kkv15ajp997gal41itbf.png'
					},
					{
						id: 5,
						name: '婚礼化妆',
						img: 'http://qnm.hunliji.com/o_1c91c7kkv6m04u1e8b1so21ou0l.png'
					},
					{
						id: 6,
						name: '婚宴酒店',
						img: 'http://qnm.hunliji.com/o_1c91c7kkvfqudtntgk1hdu9o5h.png'
					},
					{
						id: 7,
						name: '婚礼司仪',
						img: 'http://qnm.hunliji.com/o_1c91c7kkvf11i4p1a0etmn1derm.png'
					},
					{
						id: 8,
						name: '婚礼跟拍',
						img: 'http://qnm.hunliji.com/o_1c91c7kkvn8d1rhnlvhk61sdbk.png'
					}
				],
				categoryId: 1,
				storeList: []
			}
		},
		onLoad() {
			this.getStoreList()
		},
		methods: {
			//点击菜单
			onStoreNav(id) {
				this.categoryId = id;
				this.getStoreList();
			},
			//点击商家跳转
			onStoreList(id) {
				uni.navigateTo({
					url: `store_info?id=${id}`
				});
			},
			//获取商家数据
			getStoreList() {
				this.loading = true;
				let data = {
					categoryId: this.categoryId,
					cityId: this.$store.state.cityId
				}
				this.$api.StoreList(data).then(res => {
					setTimeout(() => {
						this.loading = false;
					}, 500)
					this.storeList = res.data;
				});
			}
		}
	}
</script>

<style lang="scss">
	.store-list {
		min-height: calc(100vh - 90upx);
		background-color: #fff;

		.nav {
			display: flex;
			flex-flow: wrap;
			padding: 0 0 28upx;

			.item {
				flex: 0 0 25%;
				text-align: center;
				margin-top: 28upx;

				image {
					width: 76upx;
					height: 76upx;
				}

				view {
					margin-top: 10upx;
					font-size: 24upx;
					color: #666;
				}
			}
		}

		.list {
			border-top: 16upx solid #f5f5f5;
			padding-left: 32upx;

			.onorder {
				width: 100%;
				height: calc(100vh - 446upx);
				display: flex;
				justify-content: center;
				align-items: center;

				.iconfont {
					font-size: 100upx;
					color: #999;
				}
			}

			.item {
				display: flex;
				border-bottom: 2upx solid #e7e7e7;
				padding: 32upx 32upx 34upx 0;

				.item-img {
					flex: 0 0 144upx;
					width: 144upx;
					height: 144upx;
					border-radius: 4upx;
					border: 2upx solid #e2e2e2;
					overflow: hidden;
					margin-right: 24upx;

					image {
						width: 144upx;
						height: 144upx;
					}
				}

				.item-lable {
					flex: auto;
					overflow: hidden;

					.name {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						font-weight: bold;
						font-size: 32upx;
						color: #333;
						line-height: 50upx;
					}

					.address {
						display: flex;
						font-size: 24upx;
						color: #666;
						align-items: center;
						line-height: 1.5;
						padding: 10upx 0;

						.iconfont {
							font-size: 30upx;
							color: var(--pink);
							padding-right: 8upx;
						}
					}
				}
			}
		}
	}
</style>
